<template>
	<div id="app">
		<router-view></router-view>
		<TabBar v-show="isShowNav" :tabBarList="tabBarList" @clickHandel="call"></TabBar>
	</div>
</template>

<script>
import TabBar from '@/components/tabBar.vue';
export default {
	name: 'App',
	data() {
		return {
			isShowNav: true,
			tabBarList: [
				{
					title: '首页',
					isCheck: true,
					noCheck: 'noCheck-home',
					check: 'check-home',
					router: '/home'
				},
				{
					title: '分类',
					isCheck: false,
					noCheck: 'noCheck-sort',
					check: 'check-sort',
					router: '/sort'
				},
				{
					title: '',
					isCheck: false,
					noCheck: 'noCheck-logo',
					check: 'noCheck-logo',
					router: '/adviser'
				},
				{
					title: '电话咨询',
					isCheck: false,
					noCheck: 'noCheck-adviser',
					check: 'check-adviser',
					router: ''
				},
				{
					title: '购物车',
					isCheck: false,
					noCheck: 'noCheck-cart',
					check: 'check-cart',
					router: '/cart'
				}
			]
		};
	},
	watch: {
		//路由监听
		$route: function(to) {
			// console.log(to.path)
			this.canShowNav(to.path);
			/* 路由发生变化时动态改变底部导航栏选中状态 */
			this.tabBarList.forEach(item => {
				if (to.path == '/') {
					this.tabBarList[0].isCheck = true;
				} else {
					if (item.router == to.path) {
						item.isCheck = true;
					} else {
						item.isCheck = false;
					}
				}
			});
		}
	},
	methods: {
		/* 打电话 */
		call(res) {
			if (!res) {
				window.location.href = 'tel://15977815275';
			}
		},
		//判断底部导航是否显示
		canShowNav(pathName) {
			this.thisPath = pathName;
			if (pathName == '/') {
				this.isShowNav = true;
			} else {
				if (pathName == '/home' || pathName == '/sort') {
					this.isShowNav = true;
				} else {
					this.isShowNav = false;
				}
			}
		}
	},
	created() {
		//解决bug：底部导航隐藏的页面刷新后底部导航仍然显示
		this.canShowNav(this.$route.path);
	},
	mounted() {
		/* 实时获取当前路由地址 */
		this.tabBarList.forEach(item => {
			if (this.$route.path == '/') {
				this.tabBarList[0].isCheck = true;
			} else {
				if (item.router == this.$route.path) {
					item.isCheck = true;
				} else {
					item.isCheck = false;
				}
			}
		});
	},
	components: {
		TabBar
	}
};
</script>

<style>
@import url('./css/publice.css');
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* text-align: center; */
	color: #2c3e50;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
</style>
